<template>
  <div class="dictionaryManage">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>字典管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20" class="mb-12">
      <el-col :span="6">
        <el-input v-model="form.dictionaryOptionID" placeholder="请输入字典名称"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="form.dictionaryOptionName" placeholder="请输入字典编号"></el-input>
      </el-col>
      <el-col :span="6" class="overflow-clear">
        <el-button type="primary" @click="searchDictionaryInfo" class="float-left">立即搜索</el-button>
      </el-col>
    </el-row>
    <hr>
    <div class="clearfix mb-5">
      <el-button-group class="float-right">
        <el-button type="primary" @click="newDictionary">添加字典</el-button>
        <el-button type="primary" @click.native.prevent="downloadFile">导出数据</el-button>
      </el-button-group>
    </div>
    <el-row :gutter="20">
      <el-col :span="5">
        <el-input
          placeholder="输入搜索内容"
          v-model="filterText"
          class="mb-12">
        </el-input>
        <el-tree
          accordion
          ref="tree"
          :data="tree"
          :props="defaultProps"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick">
        </el-tree>
      </el-col>
      <el-col :span="19">
        <el-table
          :data="dictionaryTable"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="dictionaryOptionID"
            label="字典编号"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="dictionaryOptionName"
            label="字典名称"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="isUse"
            label="是否启用"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="dataType"
            label="数据类型"
            min-width="120">
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="120">
            <template scope="scope">
              <el-button icon="edit" type="text"
                         @click="updateDictionaryInfo(scope.row.dictionaryOptionID)"></el-button>
              <el-button icon="delete" type="text"
                         @click="deleteRow(scope.$index, dictionaryTable,scope.row.dictionaryOptionID)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paging">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog :title="dictionaryTitle" v-model="dialogFormVisible">
      <el-form :model="dictionaryForm">
        
        <el-form-item label="上级字典编号"  prop="this.form.id" :label-width="formLabelWidth">
          <el-input v-model="dictionaryForm.updictionaryOptionID"></el-input>
        </el-form-item>
        <el-form-item label="字典名称" :label-width="formLabelWidth">
          <el-input v-model="dictionaryForm.dictionaryOptionName"></el-input>
        </el-form-item>
        <el-form-item label="字典编号" :label-width="formLabelWidth">
          <el-input v-model="dictionaryForm.dictionaryOptionID"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-radio class="radio" v-model="dictionaryForm.isUse" label="是"></el-radio>
          <el-radio class="radio" v-model="dictionaryForm.isUse" label="否"></el-radio>
        </el-form-item>
        <el-form-item label="字典描述" :label-width="formLabelWidth">
          <el-input v-model="dictionaryForm.description"></el-input>
        </el-form-item>
        <el-form-item label="字典排序号" :label-width="formLabelWidth">
          <el-input v-model="dictionaryForm.sortNo"></el-input>
        </el-form-item>
        <el-form-item label="字典标志位" :label-width="formLabelWidth">
          <el-input v-model="dictionaryForm.flag"></el-input>
        </el-form-item>
        <el-form-item label="字典英文名字" :label-width="formLabelWidth">
          <el-input v-model="dictionaryForm.englishName"></el-input>
        </el-form-item>
        <el-form-item label="字典数据类型" :label-width="formLabelWidth">
          <el-select v-model="dictionaryForm.dataType" placeholder="请选择字典数据类型" class="max-width">
            <el-option label="字符型" value="字符型"></el-option>
            <el-option label="布尔型" value="布尔型"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注1" :label-width="formLabelWidth">
          <el-input v-model="dictionaryForm.remark1" type="textarea" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="备注2" :label-width="formLabelWidth">
          <el-input v-model="dictionaryForm.remark2" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-show="!updateState" type="primary" @click="addDictionary">确 定</el-button>
        <el-button v-show="updateState" type="primary" @click="UpdateDictionary">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
</style>
<script>
  export default{
    name: 'dictionaryManage',
    data(){
      return {
        //pagination
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 30, 40],
        total: 40,
        form: {
          id:'',
          dictionaryOptionID: ''
        },
        dictionaryForm: {
          updictionaryOptionID: '',
          updictionaryOptionName: '',
          dictionaryOptionID: '',
          dictionaryOptionName: '',
          isUse: '',
          description: '',
          sortNo: '',
          flag: '',
          englishName: '',
          dataType: '',
          remark1: '',
          remark2: ''
        },
        dictionaryTable: [],
        multipleSelection: [],
        filterText: '',
        tree: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        dialogFormVisible: false,
        formLabelWidth: '120px',
        dictionaryTitle: '添加字典信息',
        updateState: false,
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.init();
      })
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {
      init(){
        this.getTree();
        this.initTable();
      },
      getTree: function () {
        this.$http.get(this.$until.url + '/dictionary/getTree').then(response => {
          this.tree = response.body.tree
        }, response => {
          console.log('文件获取失败');
        });
      },
      searchDictionaryInfo() {
        this.studentInfoSearchForm.id = '';
        this.getDictionaryInfo();
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleNodeClick(data) {
        //console.log(data);
        for (var key in this.form) {
          this.form[key] = "";
        }
        this.form.id = data.id

        for (var value of this.tree) {
         if (value.id == data.id) {
            this.form.id = data.id
            this.form.dictionaryOptionID = data.id
            this.getDictionaryInfo();
            return
          }
          
        }
        this.getDictionaryInfo();
      },
      getDictionaryInfo() {
        this.$http.post(this.$until.url + '/dictionary/getDictionnaryByUpId', this.form).then(response => {
          this.dictionaryTable = response.body.dictionary;
          console.log(response.body.dictionary);
        }, response => {
          console.log('文件获取失败');
        });
      },
      initTable() {
        this.$http.get(this.$until.url + '/dictionary/getOneDictionary').then(response => {
          this.dictionaryTable = response.body.dictionary
        }, response => {
          console.log('文件获取失败');
        });
      },
      deleteRow: function (index, rows, dictionaryOptionID) {
        this.$confirm('此操作将永久删除该字典信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteDictionaryInfo(dictionaryOptionID);
          rows.splice(index, 1);
          this.total = this.total - 1;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      deleteDictionaryInfo(dictionaryOptionID){
        this.$http.post(this.$until.url + '/dictionary/deleteDictionary', {dictionaryOptionID:dictionaryOptionID})
        .then(response => {
          this.getDictionaryInfo();
          this.$message({
            message: response.body.message,
            type: 'success'
          });
        }, response => {
          this.$message.error('删除失败');
        });
      },
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getDictionaryInfo();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getDictionaryInfo();
      },
      newDictionary(){
        this.updateState = false
        this.dictionaryTitle = '添加字典信息'
        this.dialogFormVisible = true
      },
      addDictionary(){
      	this.$http.post(this.$until.url + '/dictionary/addDictionary', this.dictionaryForm).then(response => {
			alert("添加成功");
        }, response => {
          console.log('文件获取失败');
        });
        this.dialogFormVisible = false
      },
      updateDictionaryInfo(dictionaryOptionID){
      	this.$http.post(this.$until.url + '/dictionary/getDictionary', {dictionaryOptionID:dictionaryOptionID}).then(response => {
			this.dictionaryForm = response.body.dictionary;
        }, response => {
          console.log('文件获取失败');
        });
        this.updateState = true
        this.dictionaryTitle = '修改字典信息'
        this.dialogFormVisible = true
      },
      UpdateDictionary(){
      	this.$http.post(this.$until.url + '/dictionary/updateDictionary', this.dictionaryForm).then(response => {
			alert("修改成功");
        }, response => {
          console.log('文件获取失败');
        });
        this.dialogFormVisible = false
      },
      deleteDictionaries(){
        var msg = []
        for (var value of this.multipleSelection) {
          msg.push(value.dictionaryOptionID)
        }
        this.$http.get(this.$until.url + '/studentBaseInfo/deleteStudent',
          {
            params: {
              dictionaryOptionID: dictionaryOptionID
            },
          }
        ).then(response => {
          this.getDictionaryInfo();
          this.$message({
            message: response.body.message,
            type: 'success'
          });
        }, response => {
          this.$message.error('删除失败');
        });
      },
      downloadFile(){
        this.$http.get(`${this.$until.url}/studentBaseInfo/exportStudent`, {
          params: this.studentInfoSearchForm
        }).then((res) => {
          var url = res.body.message
          try {
            var elemIF = document.createElement("iframe");
            elemIF.src = url;
            elemIF.style.display = "none";
            document.body.appendChild(elemIF);
          } catch (e) {
          }
        }, (err) => {

        })
      },
    }
  }
</script>
